/* * @Author: 董洌淇 * @Date: 2020年12月4日14:09:59 * @Last Modified by: 董洌淇 * @Last Modified time: 2020年12月4日14:10:03 * @Description: 表格组件 */
<template>
	<view class="table-box">
		<t-table border="1" :border-color="borderColor" :is-check="false" @change="change">
			<t-tr font-size="14" :color="tableHeaderColor" align="left">
				<t-th align="left" v-for="(item, index) in tableHeader" :key="index">{{ item.name }}</t-th>
			</t-tr>
			<t-tr font-size="12" :color="fontColor" align="left" v-for="(item, index) in forTableList" :key="index">
				<t-td align="left" v-for="(self, indexs) in item.props" :key="indexs">{{item[self.val]}}</t-td>
			</t-tr>
		</t-table>
	</view>
</template> 

<script>
import tTable from './t-table.vue';
import tTh from './t-th.vue';
import tTr from './t-tr.vue';
import tTd from './t-td.vue';
export default {
	props: {
		tableHeader: { // 表头配置
			type: Array,
			default () {
				return []
			}
		},
		tableList: { // 表数据
			type: Array,
			default () {
				return []
			}
		},
		borderColor: { // 线颜色
			type: String,
			default: '#DEE1E6'
		},
		tableHeaderColor: { // 表头字体颜色
			type: String,
			defalut: '#666666'
		},
		fontColor: { // 单元格字体颜色
			type: String,
			defalut: '#666666'
		}
	},
	components: {
		tTable,
		tTh,
		tTr,
		tTd
	},
	data() {
		return {}
	},
	computed: {
		forTableList () {
			if (this.tableHeader && this.tableHeader.length) {
				this.tableList.forEach(self => {
					self.props = this.tableHeader
				})
			}
			return this.tableList
		}
	},
	methods: {
		change(e) {
			this.$emit('change', e.detail)
		}
	}
};
</script>
